@charset "utf-8";

#web{
    height: 100%;
    overflow: hidden;
    #t_three{
        width: 100%;
        height: 100%;
        position: relative;
        .three-a{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 30px;
                left: 0;
                right: 0;
                margin: auto;
                z-index: 100;
                transform: scale(1.5);
                animation: three-a 0.8s linear 1 forwards 0.3s;
            }
        }
        .three-b{
            width: 100%;
            img{
                width:85%;
                position: absolute;
                top: 0px;
                left: -80%;
                right: 0;
                margin: auto;
                opacity: 0;
                margin-top: 24%;
                animation: three-b 0.3s linear 0.8s forwards 1;
                z-index: 102;
            }
        }
        .three-c{
            width: 100%;
            img{
                width: 81%;
                position: absolute;
                top: 0;
                left: -20px;
                right: 0;
                margin: auto;
                opacity: 0;
                margin-top: -50%;
                z-index: 101;
                animation: three-c 0.8s linear 1s forwards 1;
            }
        }
        .three-d{
            width: 100%;
            img{
                width: 100%;
                position: absolute;
                top: 0;
                left: 0px;
                right: 0;
                margin: auto;
                margin-top: 85%;
                z-index: 103;
            }
        }
    }
}


// 动画
@keyframes three-a{
    0%{
        transform: scale(1.5);
    }
    25%{
        transform: scale(1.8);
    }
    50%{
        transform: scale(1.2);
    }
    75%{
        transform: scale(1.6);
    }
    100%{
        transform: scale(1.5);
    }
}
@keyframes three-b{
    from{
        opacity: 0;
        left: -80%;
    }
    to{
        opacity: 1;
        left: 7%;
    }
}
@keyframes three-c{
    0%{
        opacity: 0;
        margin-top: -50%;
    }
    25%{
        opacity: 1;
        margin-top: 15%;
    }
    50%{
        opacity: 1;
        margin-top: 5%;
    }
    75%{
        opacity: 1;
        margin-top: 10%;
    }
    100%{
        opacity: 1;
        margin-top: 7%;
    }
}
